<template>
  <div class="ordersitem">
    <van-panel
      :title="'订单: ' + isData.orderNum"
      desc=""
      :status="ShopStatus(type)"
    >
      <div v-if="isData.orderItemList[0].productList[0] !== {}">
        <van-card
          v-for="item in isData.orderItemList"
          :key="item.id"
          :num="item.quantity"
          :price="(item.productList[0].price / 100).toFixed(2)"
          :title="item.productList[0].name"
          :thumb="API.BASE_SERVER_URL + item.productList[0].defaultImg"
        />
        <van-cell title="总价" :value="'￥' + (isData.price / 100).toFixed(2)" />
      </div>
      <div v-else>没有了呀！</div>
      <template #footer>
        <div v-if="type != 1">
          <van-button size="small">取消</van-button>
          <van-button size="small" type="danger" @click="show = true">查看</van-button>
        </div>
        <div v-if="type == 1">
          <van-button size="small" type="danger" @click="$router.push('/payment')">去支付</van-button>
        </div>
      </template>
    </van-panel>

    <!-- 查看弹窗 -->
    <van-dialog
      v-model="show"
      :title="'订单号: ' + isData.orderNum"
      show-cancel-button
    >
      <van-cell title="收货人：">
        <div>{{ isData.contactName }}</div>
      </van-cell>
      <van-cell title="手机号码：">
        <div>{{ isData.contactMobile }}</div>
      </van-cell>
      <van-cell title="收货地址：">
        <div>{{ isData.contactAddress }}</div>
      </van-cell>
      <van-cell title="订单号：">
        <div>{{ isData.orderNum }}</div>
      </van-cell>
      <van-cell title="订单时间：">
        <div>{{ isData.createTime }}</div>
      </van-cell>
      <van-cell title="订单金额：">
        <div>{{ (isData.price / 100).toFixed(2) + '元' }}</div>
      </van-cell>
    </van-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isData: {
        orderItemList: [{
          productList: [{}]
        }]
      },
      show: false
    }
  },
  props: {
    id: {
      type: [Number, String],
      require: true
    },
    type: {
      type: [Number, String],
      require: true
    }
  },
  methods: {
    async loadData () {
      const { data: res } = await this.$post(this.API.API_URL_ORDER_DETAIL, {
        userId: localStorage.getItem('userId'),
        type: this.type,
        orderNum: this.id
      })
      if (res) this.isData = res
    },
    ShopStatus (val) {
      switch (val) {
        case 0:
          return '已下单'
        case 1:
          return '待支付'
        case 2:
          return '配送中'
        case 3:
          return '配送完成'
        case 4:
          return '订单取消'
      }
    }
  },
  created () {
    this.loadData()
  }
}
</script>
<style scoped>
.ordersitem .van-panel__footer {
  text-align: right;
}
</style>
